<template>
  <el-form
    class="pc-admincom-search-bar-day-or-month">
    <el-select
      class="select-type"
      v-model="formData.type"
      size="mini"
      @change="clear"
      placeholder="请选择">
      <el-option
        key="0"
        label="按日查找"
        value="0"/>
      <el-option
        key="1"
        label="按月查找"
        value="1"/>
    </el-select>
    <el-date-picker
      class="data-picker"
      v-model="formData.dateStr"
      :type="dateType"
      size="mini"
      :format="format"
      :value-format="valueFormat"
      placeholder="请选择"/>
    <span>&nbsp;</span>
    <el-button
      size="mini"
      type="primary"
      @click="searchBtnClick">
      确定
    </el-button>
  </el-form>
</template>

<script>
  export default {
    name: "PCAdminComSearchBarDayOrMonth",
    data() {
      return {
        formData: {
          /**
           * 时间
           */
          dateStr: '',
          /**
           * 时间类型 0: 日 1: 月
           */
          type: '0'
        },
      }
    },
    computed: {
      /**
       * 显示的时间格式
       */
      format() {
        return `yyyy 年 MM 月${this.formData.type === '0' ? ' dd 日' : ''}`
      },
      /**
       * 输出的时间格式
       */
      valueFormat() {
        return `yyyy-MM${this.formData.type === '0' ? '-dd' : ''}`
      },
      /**
       * 时间类型
       */
      dateType() {
        return this.formData.type === '0' ? 'date' : 'month'
      }
    },
    methods: {
      /**
       * 确定按钮点击
       */
      searchBtnClick() {
        const dateStr = this.formData.dateStr ? this.formData.dateStr : ''
        this.$emit('search', dateStr)
      },
      /**
       * 清除数据
       */
      clear() {
        this.formData.dateStr = ''
      }
    }
  }
</script>

<style lang="scss" scoped>
.pc-admincom-search-bar-day-or-month {
  .select-type {
    width: 100px;
  }
  .data-picker {
    width: 180px;
  }
}
</style>
